.za-calendar {
  background-color: var(--calendar-background);
  user-select: none;
}
.za-calendar ul {
  list-style-type: disc;
}
.za-calendar li {
  display: inline-block;
  width: 14.28571%;
  text-align: center;
  vertical-align: middle;
}
.za-calendar__bar {
  display: flex;
  flex-wrap: wrap;
  color: var(--calendar-week-bar-color);
  background-color: var(--calendar-week-bar-background);
  font-size: var(--calendar-week-bar-fontsize);
  margin: 0;
  padding: 0 var(--calendar-section-padding);
  list-style-type: disc;
}
.za-calendar__bar__item {
  height: var(--calendar-day-height);
  line-height: var(--calendar-day-height);
}

.za-calendar__body {
  padding: 10px 0;
  overflow: auto;
}

.za-calendar__month {
  padding: 0 var(--calendar-section-padding);
  color: var(--calendar-day-color);
}
.za-calendar__month ul {
  margin: 0;
  padding: 0;
}
.za-calendar__month:before {
  content: attr(title);
  display: block;
  margin: 15px auto;
  font-size: var(--calendar-day-title-fontsize);
  font-weight: 500;
  padding-left: 15px;
}

.za-calendar__day {
  margin: 10px 0;
  position: relative;
  font-size: var(--calendar-day-fontsize);
  cursor: pointer;
}
.za-calendar__day__content {
  width: 30px;
  height: 30px;
  background-color: transparent;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}
.za-calendar__day.firstday-1 {
  margin-left: 14.28571%;
}
.za-calendar__day.firstday-2 {
  margin-left: 28.57142%;
}
.za-calendar__day.firstday-3 {
  margin-left: 42.85713%;
}
.za-calendar__day.firstday-4 {
  margin-left: 57.14284%;
}
.za-calendar__day.firstday-5 {
  margin-left: 71.42855%;
}
.za-calendar__day.firstday-6 {
  margin-left: 85.71426%;
}
.za-calendar__day--today .za-calendar__day__content {
  background-color: var(--calendar-day-today-background);
  color: var(--calendar-day-today-color);
}

.za-calendar__day--selected .za-calendar__day__content {
  background-color: var(--calendar-day-selected-background);
  color: var(--calendar-day-selected-color);
  box-shadow: 0 2px 5px 0 var(--calendar-day-selected-shadow);
}

.za-calendar__day--disabled {
  cursor: auto;
}
.za-calendar__day--disabled .za-calendar__day__content {
  color: var(--color-text-disabled);
}

.za-calendar__day--range {
  background-color: var(--calendar-day-range-background);
  color: var(--calendar-day-range-color);
}
.za-calendar__day--range .za-calendar__day__content {
  background-color: var(--calendar-day-range-background);
}

.za-calendar__day--range.d6 {
  background-color: transparent;
  background-image: linear-gradient(to left, transparent 0, transparent 50%, var(--theme-primary-lighter) 50%);
}
.za-calendar__day--range.d7 {
  background-color: transparent;
  background-image: linear-gradient(to right, transparent 0, transparent 50%, var(--theme-primary-lighter) 50%);
}
.za-calendar__day--range:first-child:not(.d6) {
  background-color: transparent;
  background-image: linear-gradient(to right, transparent 0, transparent 50%, var(--theme-primary-lighter) 50%);
}
.za-calendar__day--range:last-child:not(.d7) {
  background-color: transparent;
  background-image: linear-gradient(to left, transparent 0, transparent 50%, var(--theme-primary-lighter) 50%);
}
.za-calendar__day--range:last-child.d7, .za-calendar__day--range:first-child.d6 {
  background-image: none;
}

.za-calendar__day.range-start.range-end {
  background-image: none;
}
.za-calendar__day.range-start:not(.range-end):not(.d6):not(:last-child) {
  background-image: linear-gradient(to right, transparent 0, transparent 50%, var(--theme-primary-lighter) 50%);
}
.za-calendar__day.range-end:not(.range-start):not(.d7):not(:first-child) {
  background-image: linear-gradient(to left, transparent 0, transparent 50%, var(--theme-primary-lighter) 50%);
}
